<template>
	<view class="user-center-page">
		<!-- 增强版顶部紫色渐变背景 -->
		<view class="top-bg">
			<view class="bg-shape bg-shape-1"></view>
			<view class="bg-shape bg-shape-2"></view>
			<view class="bg-shape bg-shape-3"></view>
			<view class="bg-shape bg-shape-4"></view>
			<view class="bg-shape bg-shape-5"></view>
		</view>

		<scroll-view class="content" scroll-y>
			<!-- 未登录状态 -->
			<view v-if="!isLoggedIn" class="login-prompt">
				<view class="card login-card">
					<view class="login-icon">🔐</view>
					<text class="login-title">您还未登录</text>
					<text class="login-desc">登录后查看个人中心</text>
					<button class="login-button" @click="goToLogin">立即登录</button>
				</view>
			</view>

			<!-- 已登录状态 -->
			<view v-else>
				<!-- 用户信息卡片 -->
				<view class="user-card-container">
					<view class="card user-card">
						<view class="user-header">
							<view class="avatar-section">
								<view class="avatar-container">
									<view class="avatar">
										<image v-if="userInfo.avatar_url" :src="formatAvatarUrl(userInfo.avatar_url)"
											class="avatar-img" mode="aspectFill" />
										<text v-else class="avatar-icon">👤</text>
									</view>
									<view class="avatar-ring"></view>
								</view>
								<view class="user-greeting">
									<text class="greeting">{{ greetingText }}</text>
									<text class="username">{{ userInfo.user_name || '加载中...' }}</text>
								</view>
							</view>
							<view class="level-badge">
								<text class="level-text">VIP1</text>
							</view>
						</view>

						<view class="user-details">
							<view class="detail-item">
								<view class="detail-icon">🆔</view>
								<view class="detail-content">
									<text class="detail-label">用户ID</text>
									<text class="detail-value">{{ userInfo.user_id || '--' }}</text>
								</view>
							</view>
							<view class="detail-item">
								<view class="detail-icon">📱</view>
								<view class="detail-content">
									<text class="detail-label">手机号</text>
									<text class="detail-value">{{ formatPhone(userInfo.user_phone) || '--' }}</text>
								</view>
							</view>
							<view class="detail-item">
								<view class="detail-icon">📍</view>
								<view class="detail-content">
									<text class="detail-label">默认地址</text>
									<text class="detail-value">{{ userInfo.address || '未设置' }}</text>
								</view>
							</view>
							<view class="detail-item">
								<view class="detail-icon">📅</view>
								<view class="detail-content">
									<text class="detail-label">注册时间</text>
									<text class="detail-value">{{ formatDate(userInfo.created_at) || '--' }}</text>
								</view>
							</view>
						</view>

						<!-- 编辑按钮 -->
						<view class="edit-section">
							<button class="edit-button" @click="showEditModal">编辑个人信息</button>
						</view>
					</view>
				</view>

				<!-- 主要功能区 -->
				<view class="section">
					<view class="section-header">
						<view class="section-title-line"></view>
						<text class="section-title">主要功能</text>
					</view>

					<view class="function-grid">
						<view class="function-item" @click="goToOrder">
							<view class="function-icon-wrapper">
								<text class="function-icon">📦</text>
							</view>
							<text class="function-name">我的订单</text>
						</view>

						<view class="function-item" @click="goToGoodsSearch">
							<view class="function-icon-wrapper">
								<text class="function-icon">🔍</text>
							</view>
							<text class="function-name">商品查询</text>
						</view>

						<view class="function-item" @click="goToCollection">
							<view class="function-icon-wrapper">
								<text class="function-icon">❤️</text>
								<view class="favorite-count" v-if="favoriteCount > 0">
									{{ favoriteCount > 99 ? '99+' : favoriteCount }}
								</view>
							</view>
							<text class="function-name">我的收藏</text>
						</view>

						<view class="function-item" @click="goToAddress">
							<view class="function-icon-wrapper">
								<text class="function-icon">📍</text>
							</view>
							<text class="function-name">收货地址</text>
						</view>

						<!-- 开发中功能 -->
						<view v-for="(item, index) in comingSoonList" :key="index" class="function-item"
							@click="showComingSoon">
							<view class="function-icon-wrapper">
								<text class="function-icon">{{ item.icon }}</text>
								<view class="coming-soon-badge">Soon</view>
							</view>
							<text class="function-name">{{ item.name }}</text>
						</view>
					</view>
				</view>

				<!-- 收藏管理 -->
				<view class="section">
					<view class="section-header">
						<view class="section-title-line"></view>
						<text class="section-title">收藏管理</text>
					</view>
					<view class="card collection-entry" @click="goToCollection">
						<view class="entry-content">
							<text class="entry-text">点击查看我的收藏商品</text>
							<view class="entry-right">
								<text class="favorite-count-text" v-if="favoriteCount > 0">{{ favoriteCount }}个收藏</text>
								<view class="arrow-container">
									<text class="arrow">→</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 账号设置 -->
				<view class="section">
					<view class="section-header">
						<view class="section-title-line"></view>
						<text class="section-title">账号设置</text>
					</view>

					<view class="settings-card">
						<view class="setting-item" @click="goToResetPassword">
							<view class="setting-left">
								<view class="setting-icon">🔒</view>
								<text class="setting-text">重置密码</text>
							</view>
							<view class="setting-arrow">›</view>
						</view>

						<view class="divider"></view>

						<view class="setting-item logout-item" @click="logout">
							<view class="setting-left">
								<view class="setting-icon">🚪</view>
								<text class="setting-text">退出登录</text>
							</view>
							<view class="setting-arrow">›</view>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom-space"></view>
		</scroll-view>

		<!-- 加载状态 -->
		<view class="loading-mask" v-if="loading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 编辑用户信息模态框 -->
		<view class="modal-mask" v-if="showEdit" @click="hideEditModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">编辑个人信息</text>
					<text class="modal-close" @click="hideEditModal">×</text>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">头像</text>
						<view class="avatar-preview" @click="chooseAvatar">
							<image v-if="editForm.avatar_url" :src="formatAvatarUrl(editForm.avatar_url)"
								class="preview-img" mode="aspectFill" />
							<text v-else class="avatar-placeholder">+</text>
						</view>
					</view>
					<view class="form-item">
						<text class="form-label">用户名</text>
						<input class="form-input" v-model="editForm.user_name" placeholder="请输入用户名" />
					</view>
					<view class="form-item">
						<text class="form-label">手机号</text>
						<input class="form-input" v-model="editForm.user_phone" placeholder="请输入手机号" type="number" />
					</view>
					<view class="form-item">
						<text class="form-label">新密码</text>
						<input class="form-input" v-model="editForm.user_password" placeholder="留空表示不修改密码"
							type="password" />
					</view>
					<view class="form-item">
						<text class="form-label">收货地址</text>
						<input class="form-input" v-model="editForm.address" placeholder="请输入收货地址" />
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @click="hideEditModal">取消</button>
					<button class="modal-button confirm" @click="updateUserInfo" :disabled="updating">
						{{ updating ? '更新中...' : '确认更新' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const API_BASE_URL = 'http://localhost:8000/api/v1';
	const BASE_URL = 'http://localhost:8000';
	export default {
		name: 'UserCenter',
		data() {
			return {
				isLoggedIn: false,
				userInfo: {
					user_id: '',
					user_name: '',
					user_phone: '',
					address: '',
					created_at: '',
					avatar_url: ''
				},
				favoriteCount: 0,
				loading: false,
				showEdit: false,
				updating: false,
				editForm: {
					user_name: '',
					avatar_url: '',
					user_phone: '',
					address: '',
					user_password: ''
				},
				comingSoonList: [{
						name: '优惠券',
						icon: '🎟️'
					},
					{
						name: '客服中心',
						icon: '💬'
					},
					{
						name: '消息通知',
						icon: '🔔'
					},
					{
						name: '关于我们',
						icon: 'ℹ️'
					},
					{
						name: '设置',
						icon: '⚙️'
					}
				]
			};
		},
		computed: {
			greetingText() {
				const hour = new Date().getHours();
				if (hour < 6) return '夜深了';
				if (hour < 12) return '上午好';
				if (hour < 14) return '中午好';
				if (hour < 18) return '下午好';
				return '晚上好';
			}
		},
		onLoad() {
			this.checkLoginStatus();
		},
		onShow() {
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				this.isLoggedIn = !!token;
				if (this.isLoggedIn) {
					this.loadUserData();
				}
			},

			async loadUserData() {
				this.loading = true;
				try {
					await this.getUserProfile();
					await this.getFavoriteCount();
				} catch (error) {
					if (error.message.includes('401') || error.message.includes('未登录')) {
						this.handleTokenExpired();
					} else {
						uni.showToast({
							title: '加载失败，请重试',
							icon: 'none'
						});
					}
				} finally {
					this.loading = false;
				}
			},

			handleTokenExpired() {
				uni.removeStorageSync('token');
				this.isLoggedIn = false;
				uni.showToast({
					title: '登录已过期，请重新登录',
					icon: 'none'
				});
			},

			async getUserProfile() {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('token');
					if (!token) {
						this.isLoggedIn = false;
						reject(new Error('未登录'));
						return;
					}

					uni.request({
						url: `${API_BASE_URL}/users/profile`,
						method: 'GET',
						header: {
							'Authorization': `Bearer ${token}`,
							'Content-Type': 'application/json'
						},
						success: (res) => {
							if (res.statusCode === 200) {
								let userData = res.data;
								if (userData.avatar_url && userData.avatar_url.startsWith('/')) {
									userData.avatar_url = BASE_URL + userData.avatar_url;
								}
								this.userInfo = userData;
								resolve(userData);
							} else {
								if (res.statusCode === 401) this.handleTokenExpired();
								reject(new Error(res.data.detail || '获取用户信息失败'));
							}
						},
						fail: reject
					});
				});
			},

			// 1. 修复 chooseAvatar 方法
			async chooseAvatar() {
				try {
					const res = await new Promise((resolve, reject) => {
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['album', 'camera'],
							success: resolve,
							fail: reject
						});
					});

					if (!res.tempFilePaths?.[0]) return;
					const tempFilePath = res.tempFilePaths[0];

					console.log('选择的图片路径:', tempFilePath);

					// 立即更新预览 - 使用本地临时路径
					this.editForm.avatar_url = tempFilePath;

					// 强制更新视图
					this.$forceUpdate();

					// 上传头像（不等待结果，保持预览显示）
					this.uploadAvatar(tempFilePath).catch(error => {
						console.error('上传失败:', error);
						// 上传失败时保持本地预览
					});

				} catch (err) {
					console.error('选择图片失败:', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			},

			// 2. 修复 uploadAvatar 方法
			uploadAvatar(filePath) {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('token');
					if (!token) {
						uni.showToast({
							title: '未登录',
							icon: 'none'
						});
						reject(new Error('未登录'));
						return;
					}

					uni.showLoading({
						title: '上传头像中...',
						mask: true
					});

					uni.uploadFile({
						url: `${API_BASE_URL}/users/avatar`,
						filePath: filePath,
						name: 'file',
						header: {
							'Authorization': `Bearer ${token}`
						},
						success: (res) => {
							console.log('上传响应:', res);

							if (res.statusCode === 200) {
								try {
									const data = JSON.parse(res.data);
									console.log('解析后的数据:', data);

									// 修复：正确访问服务器返回的数据结构
									const avatarPath = data.data?.avatar_url || data.avatar_url;
									if (!avatarPath) {
										throw new Error('服务器未返回头像路径');
									}

									const fullUrl = BASE_URL + avatarPath;

									console.log('最终头像URL:', fullUrl);

									// 更新用户信息和编辑表单
									this.userInfo.avatar_url = fullUrl;
									this.editForm.avatar_url = fullUrl;

									// 强制更新视图
									this.$forceUpdate();

									uni.showToast({
										title: '头像上传成功',
										icon: 'success'
									});
									resolve(data);
								} catch (e) {
									console.error('解析响应数据失败:', e);
									uni.showToast({
										title: '上传失败，数据格式错误',
										icon: 'none'
									});
									reject(new Error('解析响应数据失败'));
								}
							} else {
								let errorMsg = '上传失败';
								try {
									const errorData = JSON.parse(res.data);
									errorMsg = errorData.detail || errorMsg;
								} catch (e) {
									// 忽略解析错误
								}
								uni.showToast({
									title: errorMsg,
									icon: 'none'
								});
								reject(new Error(errorMsg));
							}
						},
						fail: (error) => {
							console.error('上传失败:', error);
							uni.showToast({
								title: '网络错误，上传失败',
								icon: 'none'
							});
							reject(new Error('网络错误，上传失败'));
						},
						complete: () => {
							// 确保总是隐藏 loading
							uni.hideLoading();
						}
					});
				});
			},

			// 3. 添加路径格式化方法
			formatAvatarUrl(url) {
				if (!url) return '';

				// 如果是 blob 开头的本地路径，直接返回
				if (url.startsWith('blob:') || url.startsWith('http://tmp/') || url.startsWith('wxfile://')) {
					return url;
				}

				// 如果是相对路径，添加基础URL
				if (url.startsWith('/')) {
					return BASE_URL + url;
				}

				return url;
			},

			// 4. 修改 showEditModal 方法，确保头像路径正确
			showEditModal() {
				this.editForm = {
					user_name: this.userInfo.user_name || '',
					user_phone: this.userInfo.user_phone || '',
					user_password: '',
					avatar_url: this.formatAvatarUrl(this.userInfo.avatar_url) || '',
					address: this.userInfo.address || ''
				};
				this.showEdit = true;
			},

			async getFavoriteCount() {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('token');
					if (!token) return reject(new Error('未登录'));

					uni.request({
						url: `${API_BASE_URL}/users/favorites`,
						method: 'GET',
						header: {
							'Authorization': `Bearer ${token}`,
							'Content-Type': 'application/json'
						},
						success: (res) => {
							if (res.statusCode === 200) {
								this.favoriteCount = res.data.length;
								resolve(res.data);
							} else {
								if (res.statusCode === 401) this.handleTokenExpired();
								reject(new Error(res.data.detail || '获取收藏失败'));
							}
						},
						fail: reject
					});
				});
			},

			async updateUserInfo() {
				const hasProfileChange = this.editForm.user_name || this.editForm.user_phone || this.editForm
					.user_password;
				const hasAddressChange = this.editForm.address && this.editForm.address !== this.userInfo.address;

				if (!hasProfileChange && !hasAddressChange) {
					uni.showToast({
						title: '请至少修改一项信息',
						icon: 'none'
					});
					return;
				}

				this.updating = true;
				const token = uni.getStorageSync('token');

				try {
					if (hasProfileChange) {
						const profileData = {};
						if (this.editForm.user_name) profileData.user_name = this.editForm.user_name;
						if (this.editForm.user_phone) profileData.user_phone = this.editForm.user_phone;
						if (this.editForm.user_password) profileData.user_password = this.editForm.user_password;

						await new Promise((resolve, reject) => {
							uni.request({
								url: `${API_BASE_URL}/users/profile`,
								method: 'PUT',
								header: {
									'Authorization': `Bearer ${token}`,
									'Content-Type': 'application/json'
								},
								data: profileData,
								success: (res) => res.statusCode === 200 ? resolve() : reject(res.data
									?.detail || '更新失败'),
								fail: reject
							});
						});
					}

					if (hasAddressChange) {
						await new Promise((resolve, reject) => {
							uni.request({
								url: `${API_BASE_URL}/users/address`,
								method: 'PUT',
								header: {
									'Authorization': `Bearer ${token}`,
									'Content-Type': 'application/json'
								},
								data: {
									address: this.editForm.address
								},
								success: (res) => res.statusCode === 200 ? resolve() : reject(res.data
									?.detail || '地址更新失败'),
								fail: reject
							});
						});
					}

					uni.showToast({
						title: '更新成功',
						icon: 'success'
					});
					this.hideEditModal();
					await this.getUserProfile();
				} catch (error) {
					uni.showToast({
						title: error.message || '更新失败',
						icon: 'none'
					});
				} finally {
					this.updating = false;
				}
			},

			hideEditModal() {
				this.showEdit = false;
				this.editForm = {
					user_name: '',
					user_phone: '',
					user_password: '',
					avatar_url: '',
					address: ''
				};
			},

			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},

			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},

			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			goToOrder() {
				if (!this.isLoggedIn) return this.goToLogin();
				uni.navigateTo({
					url: '/pages/order-management/order-management'
				});
			},
			goToGoodsSearch() {
				uni.navigateTo({
					url: '/pages/goods-search/goods-search'
				});
			},
			goToCollection() {
				if (!this.isLoggedIn) return this.goToLogin();
				uni.navigateTo({
					url: '/pages/favorites/favorites'
				});
			},
			goToAddress() {
				if (!this.isLoggedIn) return this.goToLogin();
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			goToResetPassword() {
				if (!this.isLoggedIn) return this.goToLogin();
				uni.navigateTo({
					url: '/pages/forgot-password/forgot-password'
				});
			},
			logout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token');
							this.isLoggedIn = false;
							this.userInfo = {
								user_id: '',
								user_name: '',
								user_phone: '',
								address: '',
								created_at: '',
								avatar_url: ''
							};
							this.favoriteCount = 0;
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
						}
					}
				});
			},
			showComingSoon() {
				uni.showToast({
					title: '该功能正在开发中，敬请期待',
					icon: 'none',
					duration: 2000
				});
			}
		}
	};
</script>

<style scoped>
	/* 全局安全区域适配 */
	.user-center-page {
		position: relative;
		min-height: 100vh;
		background: linear-gradient(180deg, #f9f7ff 0%, #f0ebff 100%);
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
		box-sizing: border-box;
	}

	/* 增强版顶部紫色渐变背景 */
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 420rpx;
		background: linear-gradient(135deg, #6A0DAD 0%, #8A2BE2 30%, #9370DB 70%, #DA70D6 100%);
		z-index: 0;
		overflow: hidden;
	}

	.bg-shape {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
		animation: float 15s infinite ease-in-out;
	}

	.bg-shape-1 {
		width: 300rpx;
		height: 300rpx;
		top: -150rpx;
		right: -50rpx;
		animation-delay: 0s;
	}

	.bg-shape-2 {
		width: 200rpx;
		height: 200rpx;
		bottom: 50rpx;
		left: -80rpx;
		animation-delay: 3s;
	}

	.bg-shape-3 {
		width: 150rpx;
		height: 150rpx;
		top: 100rpx;
		left: 30%;
		animation-delay: 6s;
	}

	.bg-shape-4 {
		width: 180rpx;
		height: 180rpx;
		bottom: -80rpx;
		right: 20%;
		animation-delay: 9s;
	}

	.bg-shape-5 {
		width: 120rpx;
		height: 120rpx;
		top: 50%;
		left: 10%;
		animation-delay: 12s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg);
		}

		33% {
			transform: translateY(-20rpx) rotate(120deg);
		}

		66% {
			transform: translateY(10rpx) rotate(240deg);
		}
	}

	.content {
		position: relative;
		z-index: 1;
		padding: 30rpx 32rpx 0;
		box-sizing: border-box;
		width: 100%;
	}

	.login-prompt {
		margin-top: 100rpx;
	}

	.login-card {
		text-align: center;
		padding: 80rpx 40rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
		border-radius: 28rpx;
		backdrop-filter: blur(20px);
		box-shadow: 0 20rpx 60rpx rgba(138, 43, 226, 0.25);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		position: relative;
		overflow: hidden;
	}

	.login-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB, #DA70D6);
	}

	.login-icon {
		font-size: 80rpx;
		margin-bottom: 30rpx;
	}

	.login-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.login-desc {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 50rpx;
	}

	.login-button {
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 24rpx 60rpx;
		font-size: 30rpx;
		font-weight: 600;
		box-shadow: 0 10rpx 30rpx rgba(138, 43, 226, 0.4);
		transition: all 0.3s ease;
	}

	.login-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.3);
	}

	.login-button::after {
		border: none;
	}

	.user-card-container {
		margin-bottom: 40rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.user-card {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
		border-radius: 28rpx;
		padding: 40rpx 32rpx;
		backdrop-filter: blur(20px);
		box-shadow: 0 20rpx 60rpx rgba(138, 43, 226, 0.25);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		position: relative;
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;
	}

	.user-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB, #DA70D6);
	}

	.user-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 40rpx;
		width: 100%;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-icon {
		font-size: 50rpx;
		color: #aaa;
	}

	.avatar-section {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.avatar-container {
		position: relative;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #e6ccff, #d9b3ff);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 30rpx rgba(138, 43, 226, 0.4);
		position: relative;
		z-index: 2;
	}

	.avatar-ring {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		right: -8rpx;
		bottom: -8rpx;
		border-radius: 50%;
		border: 2rpx dashed #8A2BE2;
		opacity: 0.6;
		animation: rotate 20s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.user-greeting {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	.greeting {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.username {
		font-size: 26rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.level-badge {
		background: linear-gradient(135deg, #FFD700, #FFA500);
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
		margin-left: 16rpx;
		box-shadow: 0 6rpx 20rpx rgba(255, 165, 0, 0.4);
	}

	.level-text {
		font-size: 24rpx;
		color: #fff;
		font-weight: 600;
	}

	.user-details {
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.08), rgba(147, 112, 219, 0.05));
		border-radius: 20rpx;
		padding: 24rpx;
		width: 100%;
		box-sizing: border-box;
		border: 1rpx solid rgba(138, 43, 226, 0.1);
	}

	.detail-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		width: 100%;
	}

	.detail-item:not(:last-child) {
		border-bottom: 1rpx solid rgba(138, 43, 226, 0.1);
	}

	.detail-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 16rpx;
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(147, 112, 219, 0.1));
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-size: 28rpx;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(138, 43, 226, 0.2);
	}

	.detail-content {
		flex: 1;
		min-width: 0;
	}

	.detail-label {
		font-size: 26rpx;
		color: #888;
		display: block;
		margin-bottom: 6rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.detail-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.edit-section {
		margin-top: 30rpx;
		text-align: center;
	}

	.edit-button {
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 8rpx 25rpx rgba(138, 43, 226, 0.4);
		transition: all 0.3s ease;
	}

	.edit-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.3);
	}

	.section {
		margin-bottom: 40rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		width: 100%;
	}

	.section-title-line {
		width: 6rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		border-radius: 6rpx;
		margin-right: 16rpx;
		flex-shrink: 0;
		box-shadow: 0 2rpx 8rpx rgba(138, 43, 226, 0.4);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
	}

	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 16rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 20rpx;
		backdrop-filter: blur(10px);
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		transition: all 0.3s ease;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		max-width: 100%;
	}

	.function-item:active {
		transform: translateY(6rpx);
		box-shadow: 0 4rpx 16rpx rgba(138, 43, 226, 0.2);
		background: rgba(255, 255, 255, 0.95);
	}

	.function-icon-wrapper {
		width: 72rpx;
		height: 72rpx;
		border-radius: 18rpx;
		background: linear-gradient(135deg, #f0e6ff, #e6d7ff);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.3);
		flex-shrink: 0;
	}

	.function-icon {
		font-size: 32rpx;
	}

	.favorite-count {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #FF6B6B;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		border-radius: 20rpx;
		min-width: 32rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
	}

	.coming-soon-badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		background: #FF6B6B;
		color: white;
		font-size: 18rpx;
		padding: 3rpx 8rpx;
		border-radius: 10rpx;
		transform: scale(0.8);
		box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.4);
	}

	.function-name {
		font-size: 24rpx;
		color: #555;
		font-weight: 500;
		text-align: center;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.collection-entry {
		padding: 28rpx 32rpx;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 24rpx;
		backdrop-filter: blur(10px);
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		transition: all 0.3s ease;
	}

	.collection-entry:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 16rpx rgba(138, 43, 226, 0.2);
	}

	.entry-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.entry-text {
		color: #555;
		font-size: 28rpx;
		font-weight: 500;
	}

	.entry-right {
		display: flex;
		align-items: center
	}

	.favorite-count-text {
		color: #8A2BE2;
		font-size: 26rpx;
		font-weight: 600;
		margin-right: 16rpx;
	}

	.arrow-container {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow {
		font-size: 28rpx;
		color: #aaa;
	}

	.settings-card {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
		border-radius: 24rpx;
		backdrop-filter: blur(10px);
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		overflow: hidden;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx;
		transition: all 0.3s ease;
	}

	.setting-item:active {
		background: rgba(138, 43, 226, 0.05);
	}

	.setting-left {
		display: flex;
		align-items: center;
	}

	.setting-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 14rpx;
		background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(147, 112, 219, 0.1));
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-size: 28rpx;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(138, 43, 226, 0.2);
	}

	.setting-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.logout-item .setting-text {
		color: #FF4C4C;
	}

	.setting-arrow {
		font-size: 36rpx;
		color: #aaa;
	}

	.divider {
		height: 1rpx;
		background: rgba(0, 0, 0, 0.05);
		margin: 0 32rpx;
	}

	/* 模态框样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 9999;
	}

	.modal-content {
		background: white;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding: 40rpx 32rpx;
		width: 100%;
		max-height: 80vh;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}

	.modal-close {
		font-size: 48rpx;
		color: #999;
	}

	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;
	}

	.form-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		font-size: 28rpx;
		padding: 16rpx 0;
		min-height: 48rpx;
		border: none;
		outline: none;
		background: transparent;
		border-bottom: 1rpx solid #eee;
	}

	.avatar-preview {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;
		border: 2rpx dashed #ddd;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.avatar-placeholder {
		font-size: 60rpx;
		color: #ccc;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.modal-button {
		flex: 1;
		padding: 24rpx 0;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		border: none;
		transition: all 0.3s ease;
	}

	.modal-button.cancel {
		background: #f0f0f0;
		color: #666;
		margin-right: 20rpx;
	}

	.modal-button.cancel:active {
		background: #e0e0e0;
	}

	.modal-button.confirm {
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
	}

	.modal-button.confirm:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.3);
	}

	/* 加载遮罩 */
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9998;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #8A2BE2;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 底部留白 */
	.bottom-space {
		height: 60rpx;
	}

	/* 响应式适配 */
	@media (min-width: 768px) {
		.function-grid {
			grid-template-columns: repeat(5, 1fr);
		}
	}
</style>